<template>
  <div class="container">
    <el-card class="user-card">
      <div class="card-header">
        <span class="header-title">用户信息编辑
          <router-link :to="{ name: 'updateUserPassword', params: { id: user.id } }" style="margin-left: 500px;">修改密码</router-link>
        </span>
        <div class="header-line"></div>
      </div>

      <el-form 
        ref="form" 
        :model="user" 
        :rules="rules"
        label-width="100px" 
        class="user-form"
        label-position="left"
        @submit.native.prevent
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="用户名：" prop="loginName">
              <el-input 
                v-model="user.loginName" 
                placeholder="请输入用户名"
                class="custom-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称：" prop="userName">
              <el-input 
                v-model="user.userName" 
                placeholder="请输入昵称"
                class="custom-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="性别：" prop="sex">
              <el-radio-group 
                v-model="user.sex" 
                class="custom-radio"
              >
                <el-radio :label="1" border>男</el-radio>
                <el-radio :label="0" border>女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱：" prop="email">
              <el-input 
                v-model="user.email" 
                placeholder="请输入邮箱"
                class="custom-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="身份证号：" prop="identityCode">
              <el-input 
                v-model="user.identityCode" 
                placeholder="请输入身份证号"
                class="custom-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="手机号：" prop="mobile">
              <el-input 
                v-model="user.mobile" 
                placeholder="请输入手机号"
                class="custom-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="form-actions">
          <el-button 
            type="primary" 
            class="submit-btn"
            @click="save()"
          >保存修改</el-button>
          <el-button 
            class="cancel-btn"
            @click="back()"
          >返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "updateUserJ",
  data() {
    return {
      user: {
        id: "",
        loginName: "",
        userName: "",
        sex: "",
        email: "",
        identityCode: "",
        mobile: "",
        type: "",
      },
      rules: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 20, message: '昵称长度在2到20个字符之间', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ],
        identityCode: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(10|11|12))(([0|1|2][0-9])|10|20|30|31)\d{3}(\d|[Xx])$/, message: '请输入有效的身份证号', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
        ]
      }
    };
  },
  props: ["id"],
  methods: {
    back() {
      this.$router.push("/");
    },
    showInfo() {
      console.log("id"+this.loginUser.id);
      this.$axios
        .get(`api/user/find/${this.loginUser.id}`)
        .then((response) => {
          this.user = response.data.User;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios
            .post("/api/user/edit", {
              id: this.user.id,
              loginName: this.user.loginName,
              userName: this.user.userName,
              sex: this.user.sex,
              identityCode: this.user.identityCode,
              email: this.user.email,
              mobile: this.user.mobile,
              type: this.user.type,
            })
            .then((response) => {
              if (response.data.editStatus) {
                alert("修改成功");
                this.$router.push("/");
              } else {
                alert("修改失败");
              }
            });
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
  },
  computed: {
    token() {
      return sessionStorage.getItem("token") || null;
    },
    loginUser() {
      try {
        // 当token存在时才解析user
        if (this.token) {
          const userData = sessionStorage.getItem("user");
          return userData ? JSON.parse(userData) : null;
        }
        return null;
      } catch (e) {
        console.error("解析用户数据失败", e);
        return null;
      }
    }
  },
  mounted() {
    this.showInfo();
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 70vh;
}

.user-card {
  max-width: 800px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  padding: 20px 24px 12px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: block;
  margin-bottom: 8px;
}

.header-line {
  height: 2px;
  background: linear-gradient(90deg, #409eff 0%, rgba(64,158,255,0.1) 100%);
}

.user-form {
  padding: 24px;
}

.custom-input {
  border-radius: 6px;
}

.custom-input ::v-deep .el-input__inner {
  border-radius: 6px;
  transition: all 0.3s;
}

.custom-input ::v-deep .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.2);
}

.custom-radio ::v-deep .el-radio {
  margin-right: 24px;
}

.custom-radio ::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #409eff;
  border-color: #409eff;
}

.form-actions {
  margin-top: 32px;
  text-align: center;
}

.submit-btn {
  width: 120px;
  border-radius: 6px;
  padding: 12px 20px;
  background: #409eff;
  border: none;
  transition: all 0.3s;
}

.submit-btn:hover {
  background: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64,158,255,0.3);
}

.cancel-btn {
  width: 120px;
  border-radius: 6px;
  padding: 12px 20px;
  border: 1px solid #dcdfe6;
  color: #606266;
  transition: all 0.3s;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #409eff;
  background-color: rgba(64,158,255,0.05);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .el-col {
    width: 100%;
    margin-bottom: 16px;
  }
  
  .user-card {
    margin: 10px;
  }
  
  .user-form {
    padding: 16px;
  }
}
</style>